<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>角色管理</title>
    <link type="text/css" rel="stylesheet" th:href="@{/css/page.css}"/>
    <script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}"></script>
    <!-- mmGrid -->
    <link rel="stylesheet" type="text/css" th:href="@{/plug/mmGrid/mmGrid.css}"/>
    <script type="text/javascript" th:src="@{/plug/mmGrid/mmGrid.js}"></script>
    <!-- mmGrid page -->
    <link rel="stylesheet" type="text/css" th:href="@{/plug/mmGrid/mmPaginator.css}"/>
    <script type="text/javascript" th:src="@{/plug/mmGrid/mmPaginator.js}"></script>
    <!-- zTree -->
    <link rel="stylesheet" type="text/css" th:href="@{/plug/zTree/css/zTreeStyle/zTreeStyle.css}"/>
    <script type="text/javascript" th:src="@{/plug/zTree/js/jquery.ztree.core.js}"></script>
    <script type="text/javascript" th:src="@{/plug/zTree/js/jquery.ztree.excheck.js}"></script>
    <script type="text/javascript" th:src="@{/plug/zTree/js/jquery.ztree.exedit.js}"></script>
    <!-- layer -->
    <link type="text/css" rel="stylesheet" th:href="@{/plug/layui/css/layui.css}" media="all"/>
    <script type="text/javascript" th:src="@{/plug/layui/layui.js}" charset="utf-8"></script>

    <link type="text/css" rel="stylesheet" th:href="@{/js/layer/skin/layer.css}"/>
    <script type="text/javascript" th:src="@{/js/layer/layer.js}"></script>

    <style type="text/css">
        .mmGrid, .mmPaginator {

        }

        .png_table {
            margin-bottom: 8px;
        }

        .button_a {
            cursor: pointer;
            border: 1px solid #AAAAAA;
            padding: 3px 12px 3px 12px;
            text-decoration: none;
            -moz-border-radius: 10px; /* Gecko browsers */
            -webkit-border-radius: 10px; /* Webkit browsers */
            border-radius: 10px; /* W3C syntax */
            margin-right: 10px;
            text-decoration: none;
        }

        .button_a:HOVER {
            background-color: #EEEEEE;
        }

        .button_a img {
            height: 16px;
            vertical-align: -2px;
            border: 0px;
        }

        .button_a span {
            line-height: 30px;
            font-size: 14px;
            color: #111111;
            font-family:: Microsoft YaHei;
        }

        .tree_table {
            border: 1px solid #666666;
            width: 100%;
        }

        .tree_table .left_tree {
            border-right: 1px solid #666666;
            width: 180px;
        }

        .tab_span {
            font-size: 13px;
            color: #111111;
            font-family:: Microsoft YaHei;
            padding: 7px 15px;
            border: 1px solid #666666;
            margin-left: 50px;
            cursor: pointer;
            border-bottom: none;
        }

        .tab_span_checked {
            background-color: #a8adcc;
            color: #fff
        }

        .right_div {
            margin: 7px 20px 10px 20px;
            border: 1px solid #666666;
            z-index: 100;
        }

        #role_div {
            display: none;
        }

        #have_role_div_span {
            font-size: 14px;
            font-weight: bold;
            padding: 5px;
            margin-top: 10px;
        }

        .have_role_table {
            background-color: #666666;
            margin-top: 5px;
            font-size: 13px;
        }

        .have_role_table td {
            background-color: #FFFFFF;
            height: 20px;
        }

        button.btu {
            padding: 0px 12px;
            line-height: 25px;
            margin-right: 10px;
            cursor: pointer;
        }

        .alertBox_text span {
            font-weight: normal;
            letter-spacing: 0;
        }

        .text_red {
            color: red;
        }

    </style>

    <script type="text/javascript">

        var roleNodeChecked = null; //角色数选择的节点
        var departmentList; //= ${departmentList}; //部门
        var roleList = null; //角色
        var roleObj = {}; //角色

        $(function () {

            //弹出框扩展
            layer.config({
                extend: 'extend/layer.ext.js'
            });

            //获得所有角色
            getAllRole();

            //获取所有权限页面
            getAllPage();

            //tab的动作
            $(".tab_span").click(function () {
                if ($(this).hasClass("tab_span_checked")) {
                    //alert("self checked");
                } else {
                    //去除颜色
                    $(".tab_span").removeClass("tab_span_checked");
                    //加上颜色
                    $(this).addClass("tab_span_checked");

                    if ($(this).attr("role") == "role") {
                        $("#user_div").hide();
                        $("#role_div").show();
                    } else {
                        $("#role_div").hide();
                        $("#user_div").show();
                        if (null != roleNodeChecked) {
                            roleUserTable(roleNodeChecked.roleId);
                        } else {
                            layer.alert("<div class='alertBox_text'>请先选择一个角色！</div>", {icon: 0});
                        }
                    }
                }
            });

            //
            $("#table_div").width($("#user_div").width());
        });

        function getAllRole() {
            //获得所有角色
            $.ajax({
                type: "POST",
                async: true,  //默认true,异步
                url: "/admin/getAllRole",
                success: function (data) {
                    //所有角色
                    roleList = data;

                    $.each(roleList, function (index, val) {
                        roleObj[val.roleId + ''] = val.name;
                    });

                    var setting = {
                        view: {
                            selectedMulti: false
                        },
                        callback: {
                            beforeClick: function (treeId, treeNode, clickFlag) {
                                if (!treeNode.roleId) {
                                    return false;
                                }
                            },
                            onClick: function (e, treeId, treeNode, clickFlag) {

                                roleNodeChecked = treeNode;
                                //把右边的选中,根据用户id获取角色下的所有页面
                                $.ajax({
                                    type: "POST",
                                    async: false,  //默认true,异步
                                    data: "roleId=" + roleNodeChecked.roleId,
                                    url: "/admin/getPageByRole",
                                    success: function (data) {
                                        var treeObj = $.fn.zTree.getZTreeObj("treePage");

                                        //取消勾选
                                        $.each(treeObj.getCheckedNodes(true), function (index, val) {
                                            treeObj.checkNode(val, false, true);
                                        });

                                        var haveData = [];
                                        $.each(data, function (index, val) {
                                            if (val.parentId) {
                                                //alert(JSON.stringify(treeObj.getNodeByTId(val.id+"")));
                                                haveData.push(treeObj.getNodeByParam("pageId", val.pageId, null));
                                            }
                                        });
                                        //alert(JSON.stringify(haveData.length));

                                        //给权限表格加上数据
                                        //$("#have_role_div_span").text(roleNodeChecked.name+"拥有的权限：");

                                        for (var i = 0; i < haveData.length; i++) {
                                            if (haveData[i] != null)
                                                if (haveData[i].levelType == 1) {
                                                    treeObj.checkNode(haveData[i], true, true);
                                                }
                                        }
                                    }
                                });

                                //角色成员
                                if (null != roleNodeChecked) {
                                    roleUserTable(roleNodeChecked.roleId);
                                } else {
                                    layer.alert("<div class='alertBox_text'>请先选择一个角色！</div>", {icon: 0});
                                }
                            }
                        }
                    };
                    var zNodes = [{name: "角色列表", open: true, children: null}];
                    zNodes[0].children = data;
                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);

                }
            });
        }

        function getAllPage() {
            //获取所有权限页面
            $.ajax({
                type: "POST",
                async: true,  //默认true,异步
                url: "/admin/getAllPage",
                success: function (data) {
                    var setting = {
                        data: {
                            key: {
                                url: "xUrl"
                            },
                            simpleData: {
                                enable: true,
                                idKey: "pageId",//节点id名
                                pIdKey: "parentId"//父节点id名
                            }
                        },
                        check: {
                            enable: true
                        },
                        callback: {
                            beforeClick: function (treeId, treeNode, clickFlag) {
                                return false;
                            }
                        }
                    };
                    $.fn.zTree.init($("#treePage"), setting, data);
                    //模拟点击事件
                    if ($("#treeDemo_2_a").html() == null) {
                        layer.alert("<div class='alertBox_text'>请先选择一个角色！</div>", {icon: 0});
                    }
                    $("#treeDemo_2_span").click();
                    $("#treeDemo_2_a").click();
                }
            });
        }

        //增加权限
        function addRow(oldId, oldName, updateUrl) {
            //$("#BlackBox_backVal").val("");
            //oldId, oldName, updateUrl 有值，说明是修改
            //去除验证格式
            $("#role_add_div").find("input").val("");
            $("#role_add_div").find("div").last().hide();
            $("#role_add_div").find("span").removeClass("text_red");

            var indexTitle = "增加角色";
            if (updateUrl) {
                indexTitle = "修改角色";
                $("#role_add_div").find("input").val(oldName);
            }

            layer.open({
                type: 1,
                title: indexTitle,
                area: ['30%', '50%'], //宽高
                content: $("#role_add_div"),
                btn: ['保存', '关闭'], //按钮
                yes: function (index, layero) {

                    var newRoleNameCheckFlag = true;

                    var newRoleName = $.trim($("#role_add_div").find("input").val());

                    if (newRoleName == "") {
                        $("#role_add_div").find("div").last().text("角色不可为空").show();
                        newRoleNameCheckFlag = false;
                    }

                    //验证名称是否重复
                    for (var i = 0; i < roleList.length; i++) {
                        if (newRoleName == roleList[i].name) {
                            $("#role_add_div").find("div").last().text("此角色已经存在").show();
                            newRoleNameCheckFlag = false;
                            break;
                        }
                    }

                    //长度最多10个字符
                    if (newRoleName.length > 10) {
                        $("#role_add_div").find("span").addClass("text_red");
                        return false;
                    } else {
                        $("#role_add_div").find("span").removeClass("text_red");
                    }

                    if (newRoleNameCheckFlag) {
                        //验证通过
                        $("#role_add_div").find("div").last().hide();

                        var paramUrl = "/admin/addRole";
                        var paramData = "name=" + newRoleName;
                        if (updateUrl) {
                            paramUrl = updateUrl;
                            paramData = "name=" + newRoleName + "&id=" + oldId;
                        }
                        //保存
                        $.ajax({
                            type: "POST",
                            async: true,  //默认true,异步
                            url: paramUrl,
                            data: paramData,
                            success: function () {
                                //获得所有角色
                                getAllRole();

                                layer.close(index);
                            }
                        });
                    }
                }
            });
        }

        //删除权限
        function deleteRow() {

            if (roleNodeChecked) {
                if (roleNodeChecked.roleId == 1 ||
                    roleNodeChecked.roleId == 2 ||
                    roleNodeChecked.roleId == 3) {
                    layer.msg('系统权限无法删除！');
                } else {
                    layer.confirm('确认删除吗？', {icon: 3, title: '提示'}, function (index) {
                        $.ajax({
                            type: "POST",
                            async: true,  //默认true,异步
                            url: "/admin/delRole",
                            data: "id=" + roleNodeChecked.roleId,
                            success: function (data) {

                                if (data == "SUCCESS") {

                                    layer.alert('删除成功！', {icon: 1}, function (indexOk) {
                                        getAllRole();
                                        layer.close(indexOk);
                                    });

                                } else {
                                    layer.alert('删除失败！', {icon: 0});
                                }
                            }
                        });
                    });
                }

            } else {
                layer.alert("<div class='alertBox_text'>请先选择一个角色！</div>", {icon: 0});
            }

        }

        //修改权限
        function editRow() {
            if (roleNodeChecked) {
                if (roleNodeChecked.roleId == 1 ||
                    roleNodeChecked.roleId == 2 ||
                    roleNodeChecked.roleId == 3) {
                    layer.msg('系统权限无法修改！');
                } else {
                    addRow(roleNodeChecked.roleId, roleNodeChecked.name, "/admin/updateRole");
                }
            } else {
                layer.alert("<div class='alertBox_text'>请先选择一个角色！</div>", {icon: 0});
            }
        }

        //保存角色的权限页面
        function saveRolePage() {
            if (roleNodeChecked) {
                layer.confirm('确认保存吗？', {icon: 3, title: '保存角色页面'}, function (index) {
                    var layerSaving = layer.msg('保存中...', {icon: 16, time: 0, shade: [0.3, '#000']});

                    var treeObj = $.fn.zTree.getZTreeObj("treePage");

                    //增加现在选择的节点
                    var param = [];

                    param.push({"name": "roleId", "value": roleNodeChecked.roleId});

                    $.each(treeObj.getCheckedNodes(true), function (index, val) {
                        param.push({"name": "pageIds", "value": val.pageId});
                    });
                    //alert(JSON.stringify(param));
                    $.ajax({
                        type: "POST",
                        async: true,  //默认true,异步
                        url: "/admin/addPageRoleByRoleId",
                        data: param,
                        success: function (data) {
                            layer.close(layerSaving);
                            if (data == "SUCCESS") {
                                layer.alert('保存成功！', {icon: 1});
                            } else {
                                layer.alert('保存失败！', {icon: 0});
                            }
                        }
                    });

                });

            } else {
                layer.alert("请先选择一个角色，并勾选这个角色可以拥有的权限！", {icon: 0});
            }
        }

        //角色成员
        function roleUserTable(roleId) {

            if (null == roleId) {
                layer.alert("请先选择一个角色！", {icon: 0});
            }
            if ($('#exampleTableRole').html() != "") {
                console.log(roleId);
                //表格已经存在
                var param = new Object();
                param.roleId = roleId;
                param.page = 1;
                //alert(JSON.stringify(param));
                $('#exampleTableRole').mmGrid().load(param);
            } else {
                //表格
                $('#exampleTableRole').mmGrid({
                    root: 'rows',
                    url: "/admin/getAllUserByRoleId",
                    params: function () {
                        var rid = roleNodeChecked.roleId;
                        return {"roleId": rid};
                    },
                    width: 'auto',
                    height: 'auto',
                    fullWidthRows: true, //表格第一次加载数据时列伸展，自动充满表格
                    showBackboard: true,
                    nowrap: true,
                    indexCol: true,  //索引列
                    cols: [{title: 'ID', name: 'id', width: 60, hidden: true},
                        {title: '姓名', name: 'name', width: 80},
                        {title: '联系电话', name: 'phone', width: 100},
                        {title: '邮箱', name: 'email', width: 100},
                        {title: '身份证', name: 'idCard', width: 100},
                        {
                            title: '类型', name: 'role', width: 40, renderer: function (val, item, rowIndex) {
                                if (val == 1) {
                                    return "<span style='color:red'>超级管理员</span>";
                                } else if (val == 2) {
                                    return "<span style='color:green'>企业用户</span>";
                                } else if (val == 3) {
                                    return "<span style='color:blue'>超级用户</span>";
                                }
                            }
                        },
                        {
                            title: '操作', name: 'id', width: 60, renderer: function (val, item, rowIndex) {
                                // alert(JSON.stringify(roleList));
                                return "<a href='javascript:;' onclick='removeRole(" + "\"" + val + "\"" + ", " + rowIndex + ")' style='color:red;' title='删除角色用户'>删除</a>";
                            }
                        }
                    ],
                    plugins: [
                        $('#paginator11-1').mmPaginator({
                            totalCountName: 'total',   //对应MMGridPageVoBean total
                            page: 1,                   //初始页
                            pageParamName: 'page',     //当前页数
                            limitParamName: 'limit', //每页数量
                            limitList: [10, 20, 40, 50]
                        })
                    ]
                });
                $("th.mmg1f390-col0 span.mmg-title").html("序号");
            }
        }

        //选择用户
        function alertWinUser() {

            if (roleNodeChecked == null) {
                //未选择角色
                layer.alert("请先选择一个角色！", {icon: 0});
            } else {

                layer.open({
                    type: 2,
                    title: '选择用户',
                    area: ['70%', '90%'],
                    content: '/admin/selectUserRole' //iframe的url
                });
            }
        }

        //保存完用户的角色
        function afterSaveUserRole() {
            //关闭弹出框
            layer.closeAll();
            //刷新表格
            roleUserTable(roleNodeChecked.roleId);
        }

        //删除用户的角色
        function removeRole(id, rowIndex) {

            layer.confirm('确认删除吗？', {icon: 3, title: '提示'}, function (index) {

                var layerSaving = layer.msg('保存中...', {icon: 16, time: 0, shade: [0.3, '#000']});

                $('#exampleTableRole').mmGrid().removeRow(rowIndex);

                $.ajax({
                    type: "POST",
                    async: true,  //默认true,异步
                    url: "/admin/delUserRoleByUserIdAndRoleId",
                    data: "userId=" + id + "&roleId=" + roleNodeChecked.roleId,
                    success: function (data) {
                        layer.close(layerSaving);
                        if (data.result == "success") {
                            layer.alert('保存成功！', {icon: 1}, function (indexOk) {
                                layer.close(indexOk);
                            });
                        } else if (data.message == "DontOP") {
                            layer.alert('删除失败！自己不能删除自己！', {icon: 2}, function (indexOk) {
                                layer.close(indexOk);
                            });
                        } else {
                            layer.alert('保存失败！', {icon: 2}, function (indexOk) {
                                layer.close(indexOk);
                            });
                        }
                        //刷新表格
                        var param = new Object();
                        param.roleId = roleNodeChecked.roleId;
                        //alert(JSON.stringify(param));
                        $('#exampleTableRole').mmGrid().load(param);
                    }
                });

            });
        }
    </script>
</head>
<body>
<div style="width: 99%">
    <div class="layui-tab-content" style="height: 500px;">
        <div class="layui-tab-item layui-show">
            <div class="first_div" style="border:none;">
                <table class="tree_table" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="left_tree" valign="top">

                            <!-- 按钮 -->
                            <table class="png_table" cellpadding="0" cellspacing="0" style="margin-top: 5px;">
                                <tr>
                                    <td>
                                        <button class="layui-btn" style="margin:0px 10px 0px 10px;" title="角色列表">角色列表
                                        </button>
                                    </td>
                                </tr>
                            </table>

                            <ul id="treeDemo" class="ztree"></ul>
                        </td>
                        <td>
                            <div style="margin-top:20px;">
                                <span class="tab_span  tab_span_checked" role="user" title="角色成员分配">角色成员</span>
                                <span class="tab_span" role="role" style="margin-left:10px;" title="角色页面分配">角色页面</span>

                                <div class="right_div" id="user_div">
                                    <!-- 角色成员 -->
                                    <div style="margin:10px;" id="table_div">
                                        <button class="layui-btn layui-btn-radius" onclick="alertWinUser()"
                                                style="margin-bottom:5px;">增加用户
                                        </button>
                                        <table id="exampleTableRole"></table>
                                        <div style="text-align:right;">
                                            <div id="paginator11-1"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="right_div" id="role_div" align="right">
                                    <table style="width:100%;height:100%;" cellpadding="0" cellspacing="0">
                                        <tr align="left" valign="top">
                                            <td style="width:300px;">
                                                <ul id="treePage" class="ztree" style=""></ul>
                                            </td>
                                        </tr>
                                    </table>
                                    <button class="layui-btn layui-btn-radius"
                                            style="margin-bottom:10px;margin-right:50px;" onclick="saveRolePage()"
                                            title="保存角色-页面设置">保存
                                    </button>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>

            <input type="hidden" id="BlackBox_backVal"/>

            <div id="role_add_div" style="padding:10px;padding-left:20px;display:none;">
                <div style="font-size:14px;line-height:40px;">请输入新角色的名称(<span>名称最多10个字符</span>)</div>
                <input type="text" id="role_name" name="role_name" class="input_0" style="width:240px;"/>
                <div style="font-size:14px;line-height:40px;color:red;display:none;">此角色已经存在</div>
            </div>

        </div>
    </div>
</div>
</body>
</html>